<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="lib/mavon-editor/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="lib/element-ui/theme-chalk/index.css"/>
    <style type="text/css">
    </style>
    
    <script src="lib/vue/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/axios/axios.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/qs/qs.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/mavon-editor/mavon-editor.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib/element-ui/index.js" type="text/javascript" charset="utf-8"></script>
  </head>

  <body>
    <div class="x-body">
      
      <div id="app">
        
        <el-row style="margin-top: 20px;">
          
          <el-col :span="12" style="margin-left: 3%; margin-top: 6px;">
            <el-row>
              <el-col :span="22">
                <el-form label-position="left">
                  <el-form-item style="user-select: none;">
                    <el-input type="text" v-model="title" placeholder="请输入文章标题..."></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
              
              <el-col :span="22">
                <el-form label-position="left">
                  <el-form-item style="user-select: none;">
                    <el-select v-model="classify" placeholder="选择文章分类" style="width: 100%;">
                      <el-option label="精彩短文" value="article-essay"></el-option>
                      <el-option label="动画短片" value="article-film"></el-option>
                      <el-option label="英文歌曲" value="article-song"></el-option>
                      <el-option label="音乐视频" value="article-mv"></el-option>
                      <el-option label="英语语法" value="article-grammar"></el-option>
                      <el-option label="学习视频" value="article-video"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              
              <el-col :span="22">
                <el-form label-position="left" style="float: right;">
                  <el-form-item style="width: 100%">
                    <el-button type="primary" @click="save()">修改文章</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-col>
          
          <el-col :span="24">
            <el-container>
              <mavon-editor
                ref="md"
                style="width: 100%;"
                v-model="text"
                @save="save"
              />
            </el-container>
          </el-col>
          
        </el-row>
        
      </div>
      
    </div>
    
    <script>
      Vue.prototype.$axios = axios;
      Vue.prototype.$qs = window.QS;
      Vue.use(window.MavonEditor);
      Vue.use(window.ELEMENT);
      
      new Vue({
        el: '#app',
        data: function() {
          return {
            text: '',
            oldText: '',
            title: '',
            classify: ''
            
          }
        },
        mounted: function() {
          this.uploadUrl = 'http://localhost/material/uploadPicture';
          this.init();
        },
        methods: {
          getQueryVariable: function(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
              var pair = vars[i].split("=");
              if (pair[0] == variable) {
                return pair[1];
              }
            }
            return (false);
          },
          init: function() {
            var materialUUID = this.getQueryVariable("materialUUID");
            // console.log(materialUUID);
            
            this.$axios.post('/material/getMaterial?materialUUID=' + materialUUID).then((response) => {
              this.title = response.data.materialDto.materialTitle;
              this.classify = response.data.materialDto.materialCategory;
              this.text = response.data.materialDto.materialContent;
              // console.log(response.data);
            }).catch(function (error) {
              console.log(error);
            });
          },
          modArticleInfo: function() {
            var form = new FormData();
            form.append('materialUUID', this.getQueryVariable("materialUUID"));
            form.append('materialTitle', this.title);
            form.append('materialContent', this.text);
            form.append('materialCategory', this.classify);
            
            this.$axios({
              method: 'post',
              url: '/material/modMaterial',
              data: form
            })
              .then(response => {
                this.$message({
                  type: 'success',
                  message: '文章修改成功！'
                });
                
                clearTimeout(this.timer); //清除延迟执行
                this.timer = setTimeout(() => {
                  //设置延迟执行
                  // window.close();
                  var index = parent.layer.getFrameIndex(window.name);
                  //关闭当前frame
                  parent.layer.close(index);
                  window.parent.location.reload();
                }, 2000);
              })
              .catch(error => {
                console.log(error);
                this.$message({
                  type: 'error',
                  message: '修改文章失败！服务器内部错误！'
                });
              });
          },
          save: function() {
            if(this.title != "" && this.classify != "" && this.text != "") {
              this.modArticleInfo();
            }else {
              this.$message({
                type: 'error',
                message: '文章修改失败！请完善文章内容！'
              });
            }
          }
        }
      });
    </script>
  </body>

</html>
